<template>
  <div>
    <!-- 信息卡 -->
    <div class="infoCard">
      <div class="textSpan">
        <span> 姓名:李建刚 </span>
        <span> 入住号:2323928392 </span>
        <span> 身份证号:640102182312111234 </span>
        <span>责任护理员:李大好</span>
        <span>责任护士:李强</span>
        <span> 养老账户余额:723723元 </span>
        <span> 医疗保障金:32772元 </span>
      </div>

      <!-- 日期选择 -->
      <div>
        <div class="demo-date-picker">
          <div class="block">
            <el-date-picker v-model="value2" type="date" placeholder="年  月" :disabled-date="disabledDate"
              :shortcuts="shortcuts" size="large" />
            <el-button type="primary" @click="onSubmit" color="rgba(86, 118, 247, 1)"
              style="width: 87px; height: 38px; margin-left: 17px">搜索</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 表单 -->
    <div>
      <table class="table1">
        <tr>
          <td colspan="5" style="
              text-align: center;
              font-size: 20px;
              height: 74px;
              background-color: #f3f6f9;
              position: relative;
            ">
            老年医养照护中心
            <el-button type="primary" @click="onSubmit" color="rgba(86, 118, 247, 1)" style="
                width: 87px;
                height: 38px;
                margin-left: 17px;
                border-radius: 15px;
                position: absolute;
                right: 29px;
                top: 18px;
              ">生成账单</el-button>
          </td>
        </tr>

        <tr>
          <td colspan="5" style="
              text-align: center;
              font-size: 14px;
              height: 50px;
              background-color: #f3f6f9;
            ">
            养老账单明细
          </td>
        </tr>

        <tr>
          <td>入住号:23232323</td>
          <td>姓名:李建刚</td>
          <td>性别:女</td>
          <td>照护等级:四级照护</td>
          <td>床位:21床</td>
        </tr>

        <tr>
          <td colspan="2">家属性名:李建铁</td>
          <td colspan="2">家属性别:女</td>
          <td>联系电话:13000000000</td>
        </tr>

        <tr>
          <td colspan="5">消费日期:2022-12-01至2023-02-12</td>
        </tr>

        <tr>
          <td style="color: red; text-align: start">上月退补:0元</td>
          <td style="color: red; text-align: start">养老支出7006元</td>
          <td style="color: red; text-align: start">本月应收7006元</td>
          <td colspan="2"></td>
        </tr>

        <tr>
          <td colspan="4" style="text-align: start">上月退补</td>
          <td style="color: red; text-align: end">0元</td>
        </tr>

        <tr>
          <td colspan="4" style="text-align: start">养老支出</td>
          <td style="color: red; text-align: end">7006元</td>
        </tr>

        <tr>
          <td colspan="5" style="font-weight: bold">
            <div style="
                display: flex;
                justify-content: space-between;
                padding-left: 20px;
                padding-right: 40px;
              ">
              <div style="font-weight: bold">固定费用支出</div>
              <div style="font-weight: bold">7006元</div>
            </div>
          </td>
        </tr>
      </table>

      <table class="table3">
        <tr style="background-color: #f3f6f9">
          <td class="time">时间</td>
          <td class="pro1">说明</td>
          <td class="price1">金额</td>
        </tr>

        <tr>
          <td class="time">2022-12-01至2022-12-31</td>
          <td class="pro1">护理费(四级照护)</td>
          <td class="price1">5800</td>
        </tr>

        <tr>
          <td class="time">2022-12-01至2022-12-31</td>
          <td class="pro1">床位费(双人间)</td>
          <td class="price1">1206</td>
        </tr>

        <tr>
          <td colspan="3" style="font-weight: bold">
            <div style="
                display: flex;
                justify-content: space-between;
                padding-left: 20px;
                padding-right: 40px;
              ">
              <div style="font-weight: bold">日常费用支出</div>
              <div style="font-weight: bold">7006元</div>
            </div>
          </td>
        </tr>
      </table>

      <table class="table3">
        <tr style="background-color: #f3f6f9">
          <td class="time">时间</td>
          <td class="pro1">说明</td>
          <td class="price1">金额</td>
        </tr>

        <tr>
          <td class="time" style="font-size: 16px;">-</td>
          <td class="pro1" style="font-size: 16px;">-</td>
          <td class="price1" style="font-size: 16px;">-</td>
        </tr>

      </table>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now();
};

const onSubmit = () => {
  console.log("submit!");
};

const value2 = ref("");

const shortcuts = [
  {
    text: "今天",
    value: new Date(),
  },
  {
    text: "昨天",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    },
  },
  {
    text: "一周前",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      return date;
    },
  },
];
</script>
<style>
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
  margin-left: 40px;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: start;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.infoCard {
  width: 100%;
  min-height: 100px;
  background-color: #f3f6f9;
  padding: 10px;
}

.infoCard .textSpan span {
  margin-left: 40px;
}

table {
  width: 80%;
  border-collapse: collapse;
}

.table1 {
  margin-top: 50px;
  min-height: 500px;
}

.table2 {
  /* width: 100%; */
  height: 230px;
}

.time {
  width: 20%;
}

.pro {
  width: 40%;
}

.price {
  width: 10%;
}

.info {
  width: 15%;
}

.action {
  width: 15%;
}

.table1 tr,
td {
  /* width: 80%; */
  border-spacing: 0;
  border: 1px solid #e3e3e3;
  text-align: center;
  height: 50px;
  width: 20%;
  font-size: 14px;
}

.table2 {
  border-spacing: 0;
  border: 1px solid #e3e3e3;
  text-align: center;
}

.table3 .time {
  width: 20%;
}

.table3 .pro1 {
  width: 50%;
}

.table3 .price1 {
  width: 30%;
}

.tag {
  width: 45px;
  height: 35px;
  border: 1px solid red;
  color: red;
  font-size: 14px;
  margin-right: 20px;
  line-height: 35px;
}

.blank {
  width: 45px;
  height: 35px;
  /* border: 1px solid red; */
  /* color: red; */
  font-size: 14px;
  margin-right: 20px;
}

.info {
  min-width: 150px;
}
</style>